Zero1000

Score-Vue

13:
2: ⭕️quizの長さを

1. 基本形

index.html
<meta charset="utf-8">

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">



<dir id="app">
{{cnt+1}}/{{len}}<br>


<h4 v-html=quiz[cnt].q > </h4>


<li v-for="(q,i) in quiz[cnt].a">

<button @click="bt(i)">{{q}}</button>

</li>




<hr>
{{quiz[cnt].c}}<br>
<button @click="up">up</button><br>
{{entry}}

</dir>


<script>
	
	
	
	
	
	
	
	

new Vue({
	el:"#app",
	data:{
		cnt:0,
		quiz:[],	
		len:1,	
		entry:[],
	},
	
	methods:{
		up:function(){this.cnt +=1},
		
		bt:function(x){
	
			if( x==this.quiz[this.cnt].c  ){this.ok() }
			
			else{this.ng()}
			
		},
		
		ok:function(x){
			
			$('#app').addClass('animated fadeInRight')
			.one('animationend', function (){  
				$('#app').removeClass('animated fadeInRight')
			})

			
			if(this.cnt+1<this.len){
			this.cnt +=1}
			else{
				this.cnt=0
			}
		},
		
		ng:function(){
			
			$('#app').addClass('animated shake')
			.one('animationend', function (){  
				$('#app').removeClass('animated shake')
			})
			
		},		
	},
	
	created:function(){
	
		axios.get('https://zero1000.mixh.jp/quiz')
        .then(response => {
	        
	        this.quiz=response.data 
	        this.len=response.data.length
	        
        })
        .catch(error => console.log(error))

        
  
  	},
  	
  	
  	beforeMounted : function(){},
  	
  	mounted : function(){
	
	  	
	  	
	  	
	},  
  	
  	
  	computed: function(){},
  	
})
</script>